<template>
	<app-layout>
		<view class="sort-rule">
			<app-sort-rule @sort="setSort" :route="'/pages/search/search?mch_id='+mch_id" :theme="getTheme"
				@setStyle="setStyle"></app-sort-rule>
		</view>
		<view class="index-nav" v-if="nav_list.length > 0">
			<view class="app-index-nav dir-left-nowrap cross-center">
				<scroll-view scroll-x class="app-scroll">
					<!-- <view class="app-imtem" @click="changeStatus(cat_fid)">
						<image
							:src="cat_url != '' ? cat_url : imgprefix + '/web/uploads/thumbs/mall1/20210628/ee56ff6d2fd02c27930d11a635ace256.jpg'"
							mode=""></image>
						<text class="app-item"
							:class="cat_id == cat_fid && themeObject.theme === 'a' ? 'app-active-item default-item' : cat_id == cat_fid && themeObject.theme !== 'a' ? 'app-active-item ' + themeObject.back : ''">{{title || '全部'}}</text>
					</view> -->
					<view class="app-imtem" @click="changeStatus(cat_fid)">
						<image
							:src="cat_url != '' ? cat_url : imgprefix + '/web/uploads/thumbs/mall1/20210628/ee56ff6d2fd02c27930d11a635ace256.jpg'"
							mode=""></image>
						<text class="app-item u-line-1"
							:class="cat_id == cat_fid && themeObject.theme === 'a' ? 'app-active-item default-item' : cat_id == cat_fid && themeObject.theme !== 'a' ? 'app-active-item ' + themeObject.back : ''">全部</text>
					</view>
					<view class="app-imtem" v-for="(item) in nav_list" :key="item.id" @click="changeStatus(item.id)">
						<image
							:src="item.pic_url != '' ? item.pic_url : imgprefix + '/web/uploads/thumbs/mall1/20210628/ee56ff6d2fd02c27930d11a635ace256.jpg'"
							mode=""></image>
						<text class="app-item u-line-1"
							:class="cat_id == item.id && themeObject.theme === 'a' ? 'app-active-item default-item' : cat_id == item.id && themeObject.theme !== 'a' ? 'app-active-item ' + themeObject.back : ''">{{item.name}}</text>
					</view>
				</scroll-view>
				<!-- <scroll-view scroll-x class="app-scroll">
					<text class="app-item"
						:class="cat_id == cat_fid && themeObject.theme === 'a' ? 'app-active-item default-item' : cat_id == cat_fid && themeObject.theme !== 'a' ? 'app-active-item ' + themeObject.back : ''"
						@click="changeStatus(cat_fid)">全部</text>
					<text class="app-item" v-for="(item) in nav_list" :key="item.id"
						:class="cat_id == item.id && themeObject.theme === 'a' ? 'app-active-item default-item' : cat_id == item.id && themeObject.theme !== 'a' ? 'app-active-item ' + themeObject.back : ''"
						@click="changeStatus(item.id)">{{item.name}}</text>
				</scroll-view> -->
			</view>
		</view>
		<view class="product-list" v-if="goods_list.length > 0">
			<u-goods-ware :value="goods_list" @routego="routeGo"></u-goods-ware>
			<!-- <view class="beloop" :style="{height:beHeight+'rpx'}">
				<view class="belooprow" :style="item.style" @click="routeGo(item)" v-for="(item,index) in goods_list"
					:key="index">
					<view class="image">
						<image class="img" :src="item.cover_pic"></image>
						<view class="no-goods" v-if="item.goods_stock == 0">
							<view class="no-title">
								已售
							</view>
						</view>
					</view>
					<view class="title u-line-2">
						{{item.name}}
					</view>
				</view>
			</view> -->
		</view>
		<view class="u-loading-list" v-show="loading">加载中...</view>
		<!-- <view class="no-goods dir-left-nowrap cross-center main-center" v-if="noGoods">
			<view class="symbol"></view>
			<view class="u-no-icon"></view>
			<text class="u-text">暂无更多商品</text>
			<view class="symbol"></view>
		</view> -->
		<view class="app-no-goods" v-if="goods_list.length === 0">
			<app-no-goods background="#f7f7f7"></app-no-goods>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appSortRule from '../../../components/page-component/app-sort-rule/app-sort-rule.vue';
	import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';
	import uGoodsWare from '../../../components/page-component/u-goods-list/u-goods-ware.vue';

	export default {
		name: "list",

		data() {
			return {
				imgprefix: this.$siteInfo.imgroot,
				// 商品数据
				goods_list: [],
				boxHeight: [],
				beHeight: '',
				// 总页数
				page_count: 1,
				coupon_id: 0,
				page: 1,
				cat_id: 0,
				cat_url: '',
				cat_fid: 0,
				mch_id: 0,
				store_id: 0,
				// 标题
				title: '',
				sort: 1,
				sort_type: 1,
				first_req: true,
				listStyle: false,
				noGoods: false,
				// compList: [],
				// compTime: null,
				// oldList: []
				loading: false,
				id: 0,
				total_count: 0,
				// 商品分类
				nav_list: []
			}
		},
		onReady() {
			/* uni.setNavigationBarTitle({
				title: this.title,
			}); */
			if (this.title != '') {
				uni.setNavigationBarTitle({
					title: this.title,
				});
			}
		},
		onLoad(options) {
			// console.log(options);
			// this.imgprefix = this.$siteInfo.imgroot
			if (options.cat_id > 0) {
				this.cat_id = options.cat_id;
				this.cat_fid = options.cat_id;
			}
			this.store_id = options.store_id
			this.mch_id = options.mch_id;
			// console.log(options);
			this.title = options.title || '';

			if (options.coupon_id > 0) {
				this.coupon_id = options.coupon_id
			}
			this.requestCats(options.cat_id)
			this.request()
			/* let goodslist = this.$storage.getStorageSync('soldList');
			if (goodslist) {
				this.goods_list = this.goods_list.concat(goodslist)
				if(goodslist.length < 4){
					this.goods_list = this.goods_list.concat(goodslist)
				}
			} else {
				this.request()
			} */
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},

		computed: {
			...mapGetters('mallConfig', {
				getVideo: 'getVideo',
				getTheme: 'getTheme',
			}),
			...mapState({
				isShowCartFly: state => state.mallConfig.mall.setting.is_show_cart_fly,
				isShowScoreTop: state => state.mallConfig.mall.setting.is_show_score_top,
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},
		},
		watch: {
			/* goods_list: function(newVal, oldVal) {
				// console.log(newVal,66666,oldVal,7777777);
				if (newVal != oldVal) {
					let mark = oldVal.length;
					let goodslist = this.$storage.getStorageSync('goodsboutiList');
					let len = this.goods_list.length;
					let style = '';
					this.$nextTick(async function() {
						const query = uni.createSelectorQuery().in(this);
						let dataArray = [];
						await new Promise((resolve, reject) => {
							query.selectAll('.beloop .belooprow').fields({
								size: true
							}, data => {
								dataArray = data;
								resolve()
							}).exec();
						})
						for (let i = mark; i < len; i++) {
							if (i < 2) {
								if (i == 0) {
									style = `top: 0; left: 16rpx;`
								} else {
									style = `top: 0; left: 382rpx;`
								}
								this.boxHeight.push(dataArray[i].height)
								if (this.boxHeight[0] < this.boxHeight[1]) {
									this.beHeight = this.boxHeight[1] * 2
								} else {
									this.beHeight = this.boxHeight[0] * 2
								}
							} else {
								let minHeight = this.boxHeight[0];
								// console.log(minHeight);
								if (minHeight > this.boxHeight[1]) {
									minHeight = this.boxHeight[1];
									this.boxHeight[1] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 382rpx;`
									this.beHeight = this.boxHeight[1] * 2 + 32 * Math.floor(i / 2)
								} else {
									this.boxHeight[0] = minHeight + dataArray[i].height;
									style = `top: ${minHeight*2 + 32 * Math.floor(i/2)}rpx; left: 16rpx;`
									this.beHeight = this.boxHeight[0] * 2 + 32 * Math.floor(i / 2)
								}
							}
							this.$set(newVal[i], 'style', style);
							this.$forceUpdate();
						}
					})
				}
			} */
		},
		onReachBottom() {
			// 循环
			if (this.page < this.page_count) {
				this.page++;
				// this.noGoods = false;
				this.request();
			} else {
				this.loading = false;
				// this.noGoods = true;
				let goodslist = this.$storage.getStorageSync('goodsboutiList');
				if (goodslist) {
					this.goods_list = this.goods_list.concat(goodslist)
				} else {
					this.request()
				}
			}
		},
		methods: {
			routeGo(e) {
				/* if (e.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${e.id}`
					});
				} else { */
				// 10.12 
				let url = e.page_url + '&title=' + this.title + '&store_id=' + this.store_id
				if (this.cat_id) {
					url = url + '&cat_id=' + this.cat_id
				}

				uni.navigateTo({
					// url: e.page_url + '&title=' + this.title + '&store_id=' + this.store_id + '&cat_id=' + this
					// 	.cat_id
					url: url
				});
				/* } */

			},
			// 分类列表请求
			requestCats(cat_id) {
				this.$request({
					url: this.$api.default.cat_list,
					data: {
						cat_id: cat_id
					}
				}).then(res => {
					if (res.code === 0) {
						this.nav_list = this.nav_list.concat(res.data.list);
					}
				});
			},
			// 分类列表切换
			async changeStatus(id) {
				this.cat_id = id;
				this.page = 1;
				this.goods_list = [];
				this.boxHeight = []
				this.beHeight = ''
				this.$storage.removeStorageSync('goodsboutiList')
				this.request();
			},
			// 数据请求
			async request() {
				const res = await this.$request({
					url: this.$api.mch.goods,
					method: 'get',
					data: {
						status: 1,
						page: this.page,
						sort: this.sort,
						sort_type: this.sort_type,
						mch_id: this.mch_id,
						keyword: '',
						// coupon_id: this.coupon_id,
						sign: '',
						is_sold_out: 0,
						cat_id: this.cat_id
					}
				});
				if (res.code === 0) {
					// console.log(res);
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					this.goods_list = this.goods_list.concat(res.data.list)
					if (this.total_count === 0) {
						this.noGoods = true;
					}
					if (this.goods_list < 2) {
						this.goods_list = this.goods_list.concat(res.data.list)
					}
					this.$storage.setStorageSync('goodsboutiList', this.goods_list)
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},

			setSort(data, sort_type) {
				this.first_req = true;
				this.sort = data;
				this.page = 1;
				this.sort_type = sort_type;
				this.goods_list = [];
				// this.oldList = [];
				this.request(0).then(() => {
					this.first_req = false;
					this.backTop();
				});
			},

			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},

			setStyle(data) {
				this.listStyle = data;
				// clearTimeout(this.compTime);
				// this.compList = JSON.parse(JSON.stringify(this.oldList));
				// this.goods_list = [];
				// this.splitData();
			},
			splitData() {
				if (!this.compList.length) return;
				this.goods_list.push.apply(this.goods_list, this.compList.splice(0, 10));
				if (this.compList.length) {
					this.compTime = setTimeout(() => {
						this.splitData();
					}, 200);
				}
			}
		},

		components: {
			'app-sort-rule': appSortRule,
			'app-no-goods': appNoGoods,
			uGoodsWare
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/goods/list',
				title: this.title,
				params: {
					cat_id: this.cat_id,
					cat_id: this.cat_fid,
					mch_id: this.mch_id,
					title: this.title
				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				path: '/pages/goods/list',
				title: this.title,
				params: {
					cat_id: this.cat_id,
					cat_id: this.cat_fid,
					mch_id: this.mch_id,
					title: this.title
				}
			});
		},
	}
</script>

<style scoped lang="scss">
	.sort-rule {
		width: #{750upx};
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1500;
	}

	// 分类
	.index-nav {
		width: #{750rpx};
		// height: #{92rpx};
		height: #{172rpx};
	}

	.app-index-nav {
		// height: #{92rpx};
		height: #{172rpx};
		background-color: white;
		width: #{750rpx};
		/* margin-top: -32rpx;
		margin-top: 92rpx; */
		position: fixed;
		top: 92rpx;
		left: 0;
		z-index: 1000;

		.app-scroll {
			// width: #{641rpx};
			// height: #{92rpx};
			height: #{172rpx};
			white-space: nowrap;

			.app-imtem {
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// min-width: 92rpx;
				width: 150rpx;
				padding-top: 18rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}

			.app-item {
				display: inline-block;
				font-size: #{28rpx};
				width: 150rpx;
				margin: 24rpx;
				text-align: center;
				color: #666666;
				padding: 0 #{10rpx};
				box-sizing: border-box;
				height: #{56rpx};
				line-height: #{56rpx};
				border-radius: #{28rpx};
				// margin: #{18rpx} #{32rpx};
			}

			.app-active-item {
				color: white;
			}

			.default-item {
				background: linear-gradient(140deg, #ffa360, #ff5c5c);
			}
		}
	}

	/* 循环 */
	.beloop {
		// width: 686rpx;
		margin: 48rpx auto 12rpx;
		position: relative;
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; */
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		margin-bottom: 32rpx;
		width: 350rpx;
		background: #FFFFFF;
		box-shadow: 0px 30rpx 60rpx rgba(57, 57, 57, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.belooprow .image {
		width: 100%;
		height: 350rpx;
		position: relative;

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: rgba($color: #000000, $alpha: 0.5);
				backdrop-filter: blur(9px);
				font-size: 36rpx;
				text-align: center;
				line-height: 124rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.belooprow .image .img {
		width: 100%;
		height: 100%;
	}

	.belooprow .title {
		margin: 8rpx 14rpx 24rpx;
		font-size: 12px;
		line-height: 18px;
		color: rgba(0, 0, 0, 0.84);
	}

	.product-list {
		margin-top: #{124upx};
	}

	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}

	.app-no-goods {
		margin-top: 200upx;
	}

	.no-goods {
		width: 750upx;
		margin: 20upx 0;
	}

	.u-no-icon {
		width: 18upx;
		height: 20upx;
		background-image: url("../../../static/image/icon/no.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 0 10upx 0 15upx;
	}

	.symbol {
		width: 30upx;
		height: 2upx;
		background-color: #d2d2d2;
	}

	.u-text {
		font-size: 24upx;
		color: #b0b0b0;
		margin-right: 15upx;
	}

	.u-loading-list {
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #b0b0b0;
		font-size: 24upx;
	}
</style>
